<template>
    <div class="header">
    <el-col :span="24" class="header">
					<el-col v-cloak :span="9" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
						{{collapsed ? '' : sysName}}
					</el-col>
					<el-col :span="10">
						<div class="tools" v-on:click.prevent="collapse">
							<i class="fa fa-align-justify"></i>
						</div>
					</el-col>
					<el-col :span="4" class="userinfo">
						<el-dropdown>
							<span class="el-dropdown-link">
						   <span class="el-dropdown-link userinfo-inner">
								<img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>我的消息</el-dropdown-item>
								<el-dropdown-item>设置</el-dropdown-item>
								<el-dropdown-item divided v-on:click.native="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-col>
				</el-col>
    </div>
</template>
<script>
  export default {
  	data (){
  		return {
  			sysName: '贵州车友助理后台',
			sysUserName: '系统管理员',
			sysUserAvatar: './../../img/css/common/col_0_icon_0.gif',
			collapsed: false,
  		}
  	},
  	methods:{
  		   //退出登录
			logout: function() {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					//sessionStorage.removeItem('user');
					//_this.$router.push('/login');
					window.location.href = 'login.html';
				}).catch(function() {
					_this.$message({
						type: 'success',
						message: '取消退出'
					});
				});

			},
			collapse: function() {//折叠导航栏
						this.collapsed = !this.collapsed;
					},
  	}
  }
</script>
